<template>
	<view>
		<view v-if="showStep == 1" class="my-page-content ">
			<view class="my-title">取消订单</view>
			<view class="mb40">请选择取消订单原因</view>
			<view>
				<van-radio-group :value="radio" @change="onChange">
					<van-radio v-for="(item, index) in reasonList" :key="index" custom-class="my-radio-group"
						checked-color="#FCE353" :name="item.id" shape="square">
						{{item.text}}
					</van-radio>
				</van-radio-group>
			</view>
			<van-field v-if="radio == 99" custom-class="my-textare-class" :value="reason" maxlength="200"
				show-word-limit="true" label=" " :title-width="0" type="textarea" placeholder="请输入其他原因" autosize
				:border="false" @change="changeText" />

		</view>

		<refundTips v-if="showStep == 2"></refundTips>



		<van-dialog confirm-button-class="color-orange" id="van-dialog" />
		<footBtn btnText="确 定" @nextStep="nextStep"></footBtn>
	</view>

</template>

<script>
	import footBtn from '@/components/myBtn/footBtn.vue'
	import Dialog from 'wxcomponents/vant/dialog/dialog';
	import refundTips from './components/refundTips.vue';
	export default {
		components: {
			footBtn,
			refundTips
		},
		data() {
			return {
				userInfo: this.$getStorage('userInfo'),
				showStep: 1,
				radio: '',
				reason: '',
				reasonList: [],
				reasonRole1: [{
						id: 0,
						text: '行程有变'
					},
					{
						id: 1,
						text: '想再看看其他房源'
					},
					{
						id: 2,
						text: '和ViHome管家沟通不一致'
					},
					{
						id: 99,
						text: '其他'
					}
				],
				reasonRole2: [{
						id: 0,
						text: '房源已被预订'
					},
					{
						id: 1,
						text: '房屋维修中/设施完善中'
					},
					{
						id: 99,
						text: '其他'
					}
				],
				formData: {
					order_number: '', // 是	string	订单编号
					cancel_reason: '' // 是	string	取消理由，文字
				},
				orderData: this.$getStorage('orderData')
			}
		},
		mounted() {
			this.formData.order_number = this.orderData.order_number;
			this.init();
		},
		methods: {
			init() {
				if (this.userInfo.role == 1) {
					this.reasonList = this.reasonRole1;
				} else {
					this.reasonList = this.reasonRole2;
				}
			},
			onChange(e) {
				if (e.detail != 99) {
					this.formData.cancel_reason = this.reasonList[e.detail].text;
				}
				this.radio = e.detail;
			},
			changeText(e) {
				this.reason = e.detail;
			},
			showDialog() {
				Dialog.confirm({
						title: '提示',
						confirmButtonText: '确定取消',
						cancelButtonText: '再想想',
						message: '是否确定取消订单?',
					})
					.then(() => {
						this.$http.cancelOrder(this.formData).then(res => {
							this.$goPage(3, '/subOrder/orderDetail?orderNumber=' + this.formData.order_number);
							uni.$emit('refreshOrderData');
							this.$toast('取消订单成功')
						});
					})

			},
			nextStep() {
				if (this.radio == 99) {
					this.formData.cancel_reason = this.reason;
					if (!this.reason) {
						this.$toast('请输入其他原因')
						return;
					}
				}
				if (!this.formData.cancel_reason) {
					this.$toast('请选择取消订单原因')
					return;
				}
				if (this.showStep == 1 && this.orderData.status == 2) {
					this.showStep = 2;
					return;
				}
				this.showDialog();
			}
		}
	}
</script>

<style>
	.my-radio-group {
		margin-bottom: 40rpx;
	}
</style>